<template>
  <div class="e_app">
    <!-- 这是做echarts展示的页面-->
    <div class="e_header">
      <h1 class="e_title">数据可视化-Echarts</h1>
      <div class="daliyTime">{{ showDaliyTime }}</div>
    </div>
    <div class="e_mainBox">
      <div class="column">
        <panel
          :boxClassName="boxClassNameList[0]"
          :componentOption="optionsList[0]"
        >
          <template slot="title">
            <h2 class="chart_title1">柱形图-就业行情</h2>
          </template>
          <template slot="main">
            <div class="chart_main e_zhu1"></div>
          </template>
        </panel>
        <panel
          :boxClassName="boxClassNameList[2]"
          :componentOption="optionsList[2]"
        >
          <template slot="title">
            <h2 class="chart_title1">折线图-人员变动</h2>
          </template>
          <template slot="main">
            <div class="chart_main e_zhe1"></div>
          </template>
        </panel>
        <panel
          :boxClassName="boxClassNameList[4]"
          :componentOption="optionsList[4]"
        >
          <template slot="title">
            <h2 class="chart_title1">饼形图-薪资水平</h2>
          </template>
          <template slot="main">
            <div class="chart_main e_bin1"></div>
          </template>
        </panel>
      </div>
      <div class="column">
        <!-- no模块制作 -->
        <div class="no">
          <div class="no_hd">
            <ul class="hd_ul">
              <li>9999</li>
              <li>123456</li>
            </ul>
          </div>
          <div class="no_bd">
            <ul class="bd_ul">
              <li>前端需求人数</li>
              <li>市场供应人数</li>
            </ul>
          </div>
        </div>
        <!-- 地图模块制作 -->
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <div class="chart"></div>
          <!-- <baidu-map
            class="chart"
            :center="baduiMapCenter"
            :zoom="baiduMapZoom"
            @ready="handleBaiduMapReady"
          >
            <bm-map-type
              :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
              anchor="BMAP_ANCHOR_TOP_LEFT"
            ></bm-map-type>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-geolocation
              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
              :showAddressBar="true"
              :autoLocation="true"
            ></bm-geolocation>
          </baidu-map> -->
        </div>
      </div>
      <div class="column">
        <panel
          :boxClassName="boxClassNameList[1]"
          :componentOption="optionsList[1]"
        >
          <template slot="title">
            <h2 class="chart_title1">柱形图-模块相关</h2>
          </template>
          <template slot="main">
            <div class="chart_main e_zhu2"></div>
          </template>
        </panel>
        <panel
          :boxClassName="boxClassNameList[3]"
          :componentOption="optionsList[3]"
        >
          <template slot="title">
            <h2 class="chart_title1">折线图-录用量</h2>
          </template>
          <template slot="main">
            <div class="chart_main e_zhe2"></div>
          </template>
        </panel>
        <panel
          :boxClassName="boxClassNameList[5]"
          :componentOption="optionsList[5]"
        >
          <template slot="title">
            <h2 class="chart_title1">饼形图-地区分布</h2>
          </template>
          <template slot="main">
            <div class="chart_main e_bin2"></div>
          </template>
        </panel>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/requireJS/flexible";
import panel from "@/components/echartsComponent/panlBox.vue";
import * as echarts from "echarts";
// 引入中国地图（经纬线需要）
import "@/assets/requireJS/china";
export default {
  data() {
    return {
      time1: null,
      showDaliyTime: "",
      baduiMapCenter: "南京市雨花台区",
      baiduMapZoom: 3,
      optionsList: [
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "0",
            top: "10px",
            right: "0",
            bottom: "4%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: [
                "初级",
                "中级",
                "高级",
                "大前端",
                "全栈",
                "架构",
                "UI测绘",
              ],
              axisTick: {
                alignWithLabel: true,
              },
              //修改刻度标签
              axisLabel: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 12,
                interval: 0,
              },
              axisLine: {
                show: false,
              },
              minorTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 12,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.1)",
                  width: 1,
                  type: "solid",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.1)",
                  width: 1,
                  type: "solid",
                },
              },
            },
          ],
          color: ["#2f89cf"],
          series: [
            {
              name: "Direct",
              type: "bar",
              barWidth: "60%",
              data: [10, 200, 300, 150, 400, 100, 10],
              itemStyle: {
                borderRadius: [6, 6, 0, 0],
              },
            },
          ],
        },
        {
          grid: {
            top: "10%",
            left: "25%",
            bottom: "10%",
            right: "15%",
            // containLabel: true,
          },
          xAxis: {
            show: false,
          },
          yAxis: [
            {
              type: "category",
              data: ["JAVA", "React", "Angluar", "JQuery", "Vue", "Node"],
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#fff",
              },
              inverse: true,
            },
            {
              data: ["1525", "2023", "1536", "522", "4018", "533"],
              show: true,
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#fff",
                fontSize: 10,
              },
            },
          ],
          series: [
            {
              name: "条",
              type: "bar",
              itemStyle: {
                borderRadius: 20,
                color: function (params) {
                  let myColor = [
                    "#cd6ada",
                    "#8df7ec",
                    "#f57474",
                    "#f8b448",
                    "#30a088",
                    "#5bd0f3",
                  ];
                  let num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
              data: [15, 20, 15, 5, 40, 5],
              yAxisIndex: 0,
              barCategoryGap: 50,
              barWidth: 12,
              label: {
                show: true,
                formatter: "{c}%",
                position: "inside",
                fontSize: 10,
                color: "#fff",
              },
            },
            {
              name: "框",
              type: "bar",
              data: [40, 40, 40, 40, 40, 40],
              barWidth: 15,
              yAxisIndex: 1,
              itemStyle: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 2,
                borderRadius: 15,
              },
            },
          ],
        },
        {
          tooltip: {
            trigger: "axis",
          },
          color: ["lightskyblue", "#ed3f35", "#8df7ec"],
          legend: {
            data: ["前端", "后端", "全栈"],
            textStyle: {
              color: "#4c9bfd",
            },
            right: "10%",
          },
          grid: {
            left: "3%",
            top: "20%",
            right: "2%",
            bottom: "3%",
            containLabel: true,
            show: true,
            borderColor: "#012f4a",
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["试用期", "半年", "一年", "两年", "三年", "五年", "十年"],
            axisTick: {
              show: false,
            },
            boundaryGap: false,
            axisLabel: {
              color: "#4c9bfd",
              interval: 0,
            },
            axisLine: {
              show: false,
            },
            minorTick: {
              show: false,
            },
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: false,
            },
            boundaryGap: false,
            axisLabel: {
              color: "#4c9bfd",
              interval: 0,
            },
            axisLine: {
              show: false,
            },
            minorTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
          series: [
            {
              name: "前端",
              type: "line",
              smooth: true,
              data: [60, 130, 80, 155, 202, 103, 134],
            },
            {
              name: "后端",
              type: "line",
              smooth: true,
              data: [30, 110, 120, 181, 240, 230, 34],
            },
            {
              name: "全栈",
              type: "line",
              smooth: true,
              data: [20, 82, 110, 165, 210, 305, 23],
            },
          ],
        },
        {
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["前端", "后端", "全栈"],
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 12,
            },
            top: "0%",
            right: "10%",
          },
          grid: {
            left: "3%",
            right: 10,
            top: 30,
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: [
                "初级",
                "中级",
                "高级",
                "管理",
                "架构",
                "超高级",
                "骨灰级",
              ],
              axisLabel: {
                color: "rgba(255,255,255,0.6)",
                fontSize: 11,
                interval: 0,
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0.2)",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                color: "rgba(255,255,255,0.6)",
                fontSize: 12,
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(255,255,255,0.2)",
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(255,255,255,.1)",
                },
              },
            },
          ],
          series: [
            {
              name: "前端",
              type: "line",
              areaStyle: {},
              smooth: true,
              symbol: "circle",
              symbolSize: 10,
              showSymbol: false,
              itemStyle: {
                color: "#0184d5",
                borderColor: "rgba(221,220,107,0.1)",
                borderWidth: 12,
              },
              lineStyle: {
                color: "#0184d5",
                width: 2,
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(1,132,213,0.4)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(1,132,213,0.1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                shadowColor: "rgba(0,0,0,0.1)",
              },
              emphasis: {
                focus: "series",
              },
              data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
              name: "后端",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 10,
              showSymbol: false,
              itemStyle: {
                color: "#ddf148",
                borderColor: "rgba(221,220,107,0.1)",
                borderWidth: 12,
              },
              lineStyle: {
                color: "#def148",
                width: 1,
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(221, 241, 72, 0.4)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(221, 241, 72, 0.1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                shadowColor: "rgba(0,0,0,0.1)",
              },
              emphasis: {
                focus: "series",
              },
              data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
              name: "全栈",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 10,
              showSymbol: false,
              itemStyle: {
                color: "#8d94fc",
                borderColor: "rgba(221,220,107,0.1)",
                borderWidth: 12,
              },
              lineStyle: {
                color: "#8d94fc",
                width: 1,
              },
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(141, 148, 252,0.4)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(141, 148, 252,0.1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                shadowColor: "rgba(0,0,0,0.1)",
              },
              emphasis: {
                focus: "series",
              },
              data: [181, 223, 165, 322, 256, 318, 120],
            },
          ],
        },
        {
          tooltip: {
            trigger: "item",
          },
          color: ["#8dc6fc", "#268ef0", "#0c6ac3", "#054077", "#052d77"],
          legend: {
            bottom: "5%",
            left: "center",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 10,
            },
          },
          series: [
            {
              name: "薪资水平",
              type: "pie",
              // 下面的该属性是修改饼图的大小
              radius: ["40%", "65%"],
              avoidLabelOverlap: false,
              //下面的该属性是修改饼图的位置
              center: ["50%", "40%"],
              //不显示文字标签
              label: {
                show: false,
                position: "center",
              },
              //不显示链接线
              labelLine: {
                show: false,
              },
              data: [
                { value: 484, name: "4-6k" },
                { value: 669, name: "6-10k" },
                { value: 1048, name: "10-15k" },
                { value: 580, name: "15-20k" },
                { value: 300, name: "20k+" },
              ],
            },
          ],
        },
        {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff",
          ],
          legend: {
            left: "center",
            bottom: "0%",
            itemWidth: 10,
            itemHeight: 10,
            data: [
              "北京",
              "上海",
              "广州",
              "深圳",
              "南京",
              "重庆",
              "武汉",
              "杭州",
            ],
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 10,
            },
          },
          series: {
            name: "地区分布",
            type: "pie",
            radius: ["10%", "60%"],
            center: ["50%", "35%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              color: "#fff",
              fontSize: 10,
            },
            labelLine: {
              length: 12,
            },
            data: [
              { value: 25, name: "北京" },
              { value: 28, name: "上海" },
              { value: 26, name: "广州" },
              { value: 30, name: "深圳" },
              { value: 19, name: "南京" },
              { value: 18, name: "重庆" },
              { value: 16, name: "武汉" },
              { value: 24, name: "杭州" },
            ],
          },
        },
      ],
      boxClassNameList: [
        "e_zhu1",
        "e_zhu2",
        "e_zhe1",
        "e_zhe2",
        "e_bin1",
        "e_bin2",
        "chart",
      ],
      myChartChinaAirplantMapOption: "",
    };
  },
  components: {
    panel,
  },
  methods: {
    getTime() {
      clearTimeout(this.time1); //清除定时器
      let dt = new Date();
      let y = dt.getFullYear();
      let mt = dt.getMonth() + 1;
      let day = dt.getDate();
      let h = dt.getHours(); //获取小时
      let m = dt.getMinutes(); //获取分钟
      let s = dt.getSeconds(); //获取秒
      this.showDaliyTime =
        "当前时间：" + y + "-" + mt + "-" + day + " " + h + ":" + m + ":" + s;
      this.time1 = setTimeout(this.getTime, 1000); //设置定时器循环运行
    },
    //百度地图Ready事件
    handleBaiduMapReady({ BMap, map }) {
      console.log(BMap, map);
      this.baduiMapCenter = "南京市";
      this.zoom = 15;
    },
    AirplantMapOptionInit() {
      let geoCoordMap = {
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        乌鲁木齐: [87.9236, 43.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        兰州: [103.5901, 36.3043],
        包头: [110.3467, 41.4899],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        南京: [118.8062, 31.9208],
        南宁: [108.479, 23.1152],
        南昌: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        合肥: [117.29, 32.0581],
        呼和浩特: [111.4124, 40.4901],
        咸阳: [108.4131, 34.8706],
        哈尔滨: [127.9688, 45.368],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        大连: [122.2229, 39.4409],
        天津: [117.4219, 39.4189],
        太原: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        常州: [119.4543, 31.5582],
        广州: [113.5107, 23.2196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        成都: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        拉萨: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        昆明: [102.9199, 25.4663],
        杭州: [119.5313, 29.8773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        武汉: [114.3896, 30.6628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        沈阳: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        济南: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        石家庄: [114.4995, 38.1006],
        福州: [119.4543, 25.9222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        西宁: [101.4038, 36.8207],
        西安: [109.1162, 34.2004],
        贵阳: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        郑州: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        银川: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        长春: [125.8154, 44.2584],
        长沙: [113.0823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028],
      };

      let XAData = [
        [{ name: "西安" }, { name: "北京", value: 100 }],
        [{ name: "西安" }, { name: "上海", value: 100 }],
        [{ name: "西安" }, { name: "广州", value: 100 }],
        [{ name: "西安" }, { name: "西宁", value: 100 }],
        [{ name: "西安" }, { name: "银川", value: 100 }],
      ];

      let XNData = [
        [{ name: "西宁" }, { name: "北京", value: 100 }],
        [{ name: "西宁" }, { name: "上海", value: 100 }],
        [{ name: "西宁" }, { name: "广州", value: 100 }],
        [{ name: "西宁" }, { name: "西安", value: 100 }],
        [{ name: "西宁" }, { name: "银川", value: 100 }],
      ];

      let YCData = [
        [{ name: "银川" }, { name: "北京", value: 100 }],
        [{ name: "银川" }, { name: "广州", value: 100 }],
        [{ name: "银川" }, { name: "上海", value: 100 }],
        [{ name: "银川" }, { name: "西安", value: 100 }],
        [{ name: "银川" }, { name: "西宁", value: 100 }],
      ];

      let planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
      //let planePath = 'arrow';
      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let dataItem = data[i];

          let fromCoord = geoCoordMap[dataItem[0].name];
          let toCoord = geoCoordMap[dataItem[1].name];
          if (fromCoord && toCoord) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord],
              value: dataItem[1].value,
            });
          }
        }
        return res;
      };

      let color = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
      let series = [];
      [
        ["西安", XAData],
        ["西宁", XNData],
        ["银川", YCData],
      ].forEach(function (item, i) {
        series.push(
          {
            name: item[0] + " Top3",
            type: "lines",
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: "red", //arrow箭头的颜色
              symbolSize: 3,
            },
            lineStyle: {
              color: color[i],
              width: 0,
              curveness: 0.2,
            },
            data: convertData(item[1]),
          },
          {
            name: item[0] + " Top3",
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"],
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: planePath,
              symbolSize: 15,
            },
            lineStyle: {
              color: color[i],
              width: 1,
              opacity: 0.6,
              curveness: 0.2,
            },
            data: convertData(item[1]),
          },
          {
            name: item[0] + " Top3",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              show: true,
              position: "right",
              formatter: "{b}",
            },
            symbolSize: function (val) {
              return val[2] / 8;
            },
            emphasis: {
              itemStyle: {
                areaColor: "#2B91B7",
                color: color[i],
              },
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].value,
                ]),
              };
            }),
          }
        );
      });
      let option = {
        // backgroundColor: "#000",
        tooltip: {
          trigger: "item",
          formatter: function (params, ticket, callback) {
            if (params.seriesType == "effectScatter") {
              return "线路：" + params.data.name + "" + params.data.value[2];
            } else if (params.seriesType == "lines") {
              return (
                params.data.fromName +
                ">" +
                params.data.toName +
                "<br />" +
                params.data.value
              );
            } else {
              return params.name;
            }
          },
        },
        legend: {
          orient: "vertical",
          top: "bottom",
          left: "right",
          data: ["西安 Top3", "西宁 Top3", "银川 Top3"],
          textStyle: {
            color: "#fff",
          },
          selectedMode: "multiple",
        },
        geo: {
          map: "china",
          zoom: 0.8,
          emphasis: {
            label: {
              show: true,
              color: "#fff",
            },
          },
          roam: true,
          itemStyle: {
            // areaColor: "#00186E",
            areaColor: "rgba(20, 41, 87,0.6)",
            borderColor: "#195BB9",
            borderWidth: 1,
            emphasis: {
              areaColor: "#2B91B7",
              // areaColor: '#fff'
            },
          },
        },
        //修改版本后的
        // geo: {
        //   map: "china",
        //  //问题出在这个emphasis上面
        //   emphasis: {
        //     label: {
        //       show: true,
        //       color: "#fff",
        //     },
        //     itemStyle: {
        //       areaColor: "#2B91B7",
        //       borderColor: "#195BB9",
        //       borderWidth: 1,
        //     },
        //   },
        //   regions: [
        //     {
        //       name: "广东省",
        //       itemStyle: {
        //         areaColor: "#00186E",
        //       },
        //     },
        //   ],
        //   roam: true,
        // },
        series: series,
      };
      return option;
    },
    // echartsInit(option, boxID) {
    //   boxID += "";
    //   //基于绘制好的盒子开始初始化echarts
    //   let myChart = this.$echarts.init(document.querySelector(boxID));
    //   myChart.setOption(option);
    // },
  },
  mounted() {
    console.log(
      "当前电脑屏幕宽高为：" + window.outerWidth + "*" + window.outerHeight
    );
    this.time1 = setTimeout(this.getTime, 1000); //开始运行
    this.getTime();
    //飞机航线图
    let myNewChart = this.$echarts.init(document.querySelector(".chart"));
    myNewChart.setOption(this.optionsList[6]);
    window.addEventListener("resize", function () {
      myNewChart.resize();
    });
  },
  created() {
    //在mounted之前把地图数据推进数据列表里
    this.optionsList.push(this.AirplantMapOptionInit());
  },
  beforeUpdate() {},
};
</script>

<style scoped>
.e_app {
  /* width: 100vw; */
  /* height: 100vh; */
  min-height: 824px;
  background: url("../assets/images/bg.jpg") no-repeat top center;
  background-attachment: fixed;
  background-size: 100% 100%;
}
.e_title {
  color: aliceblue;
  text-align: center;
  line-height: 1.25rem;
  font-size: 0.75rem /* 48px -> .75rem */;
}
.e_header {
  width: 24rem;
  height: 1.5625rem /* 100px -> 1.5625rem */;
  background: url("../assets/images/head_bg.png") no-repeat;
  background-size: 100%, 100%;
  position: relative;
}
.daliyTime {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.3125rem /* 20px -> .3125rem */ 0.625rem /* 40px -> .625rem */;
  text-align: center;
  color: #fff;
  font-size: 0.25rem /* 16px -> .25rem */;
}
.e_mainBox {
  min-width: 1024px;
  max-width: 1536px;
  margin: 0 auto;
  display: flex;
  padding: 0.1563rem /* 10px -> .1563rem */ 0.3125rem /* 20px -> .3125rem */;
}
.column {
  flex: 3;
}
.column:nth-child(2) {
  flex: 5;
  margin: 0 0.1563rem /* 10px -> .1563rem */ 0.2344rem /* 15px -> .2344rem */;
}
.chart_title1 {
  color: #fff;
  font-size: 0.3125rem /* 20px -> .3125rem */;
  text-align: center;
  height: 0.75rem /* 48px -> .75rem */;
  line-height: 0.75rem /* 48px -> .75rem */;
}
.chart_main {
  height: 3.75rem;
  /* background-color: lightblue; */
}
.no {
  padding: 0 0.2344rem /* 15px -> .2344rem */;
  background-color: rgba(101, 132, 226, 0.1);
}
.no_hd {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: relative;
}
.no_hd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.no_hd::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.hd_ul {
  display: flex;
}
.hd_ul li {
  flex: 1;
  text-align: center;
  line-height: 1.25rem /* 80px -> 1.25rem */;
  font-size: 1.0938rem /* 70px -> 1.0938rem */;
  color: #ffeb7b;
  font-family: "electronicFont";
  position: relative;
}
.hd_ul li:nth-child(1)::after {
  position: absolute;
  top: 25%;
  right: 0;
  height: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  content: "";
}
.bd_ul {
  display: flex;
}
.bd_ul li {
  flex: 1;
  text-align: center;
  height: 0.625rem /* 40px -> .625rem */;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.2813rem /* 18px -> .2813rem */;
  padding-top: 0.1563rem /* 10px -> .1563rem */;
}
.map {
  height: 12.6563rem /* 810px -> 12.6563rem */;
  position: relative;
}
.map1 {
  width: 8.0938rem /* 518px -> 8.0938rem */;
  height: 8.0938rem /* 518px -> 8.0938rem */;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../assets/images/map.png");
  background-size: 100% 100%;
  opacity: 0.6;
}
.map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10.0469rem /* 643px -> 10.0469rem */;
  height: 10.0469rem /* 643px -> 10.0469rem */;
  background: url("../assets/images/lbx.png");
  background-size: 100% 100%;
  animation: rotate1 15s linear infinite;
  opacity: 0.6;
}
.map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.8438rem /* 566px -> 8.8438rem */;
  height: 8.8438rem /* 566px -> 8.8438rem */;
  background: url("../assets/images/jt.png");
  background-size: 100% 100%;
  animation: rotate2 15s linear infinite;
  opacity: 0.6;
}
.chart {
  position: absolute;
  top: 0;
  left: 0;
  /* transform: translate(-50%, -50%); */
  /* background-color: lightskyblue; */
  width: 100%;
  height: 12.6563rem /* 810px -> 12.6563rem */;
}
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px;
  }
}
@media screen and (min-width: 1536px) {
  html {
    font-size: 64px;
  }
}
</style>